<template>
  <div class="login-body">
<!--    <div class="bg">-->

<!--    </div>-->

    <div class="login-panel">
      <el-form class="login-register" :model="formData" :rules="rules" ref="formDataRef" @submit.prevent
               v-if="opType == 1">
        <div class="login-title">登录</div>
        <el-form-item prop="username">
          <el-input size="large" clearable placeholder="请输入账号" v-model.trim="formData.username" maxLength="150">
            <template #prefix>
              <span class="iconfont icon-account"></span>
            </template>
          </el-input>
        </el-form-item>

        <!-- 登陆密码 -->
        <el-form-item prop="password">
          <el-input type="password" size="large" placeholder="请输入密码" v-model.trim="formData.password"
                    show-password>
            <template #prefix>
              <span class="iconfont icon-password"></span>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item>

          <div class="no-account">
<!--            <el-checkbox v-model="formData.rememberme">-->
<!--              记住我-->
<!--            </el-checkbox>-->
            <a href="javascript:void(0)" class="a-link" @click="changeOpType(0)">没有账号</a>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="op-btn" size="large" @click="login()">登录</el-button>
        </el-form-item>
      </el-form>

      <!-- 注册 -->
      <el-form class="login-register" :model="formData" :rules="rules" ref="formDataRef" @submit.prevent
               v-else-if="opType == 0">
        <div class="login-title">注册</div>
        <el-form-item prop="username">
          <el-input size="large" clearable placeholder="请输入账号" v-model.trim="formData.username" maxLength="150">
            <template #prefix>
              <span class="iconfont icon-account"></span>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input type="password" size="large" placeholder="请输入密码" v-model.trim="formData.password"
                    show-password>
            <template #prefix>
              <span class="iconfont icon-password"></span>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="confirmPassword">
          <el-input type="password" size="large" placeholder="请输入再次密码" v-model.trim="formData.confirmPassword"
                    show-password>
            <template #prefix>
              <span class="iconfont icon-password"></span>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="mailbox">
          <el-input size="large" placeholder="请输入邮箱" v-model.trim="formData.mailbox">
            <template #prefix>
              <span class="iconfont icon-checkcode"></span>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="name">
          <el-input size="large" clearable placeholder="请输入姓名" v-model.trim="formData.name" maxLength="150">
            <template #prefix>
              <span class="iconfont icon-account"></span>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <div class="no-account">
            <!--                        <a href="javascript:void(0)" class="a-link" @click="changeOpType(2)">忘记密码</a>-->
            <a href="javascript:void(0)" class="a-link" @click="changeOpType(1)">登录</a>
          </div>
        </el-form-item>

        <el-form-item @click="register">
          <el-button type="primary" class="op-btn" size="large">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {getCurrentInstance, ref, onMounted} from "vue";
import axios from "axios"
import {ElMessage} from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const {proxy} = getCurrentInstance();

onMounted(() => {
  const token = localStorage.getItem("token")
   if(token !== undefined && token != null && token !== ""){
     // console.log(token)
     loginToken()
   }
  localStorage.setItem("navbarIndex","0")
})

const loginToken = () =>{
  axios.get("user/token").then(res =>{

    ElMessage({
      message: "欢迎回来"+res.data.name,
      type: 'success',
      duration: 3000
    })

    setTimeout(function (){
      router.replace("/index/home/75395123")
    },700);
  })
}

// 操作类型 0 注册 1 登录 2 重置密码
const opType = ref(1)
const formData = ref({});

const changeOpType = (type) => {
  changeToFormDataEmpty();
  opType.value = type;
}

// 初始化数据
const changeToFormDataEmpty = () => {
  formData.value = {};
}

const formDataRef = ref();
const rules = {
  title: [{
    required: true,
    message: "请输入内容",
  }]
}

//注册
const register = () => {
  console.log("register",formData.value.password);

  if(formData.value.password !== formData.value.confirmPassword){
    ElMessage({
      message: "2次密码输入不一样",
      type: 'warning',
      duration: 2000
    })
    return
  }

  axios.post("user/register",formData.value).then(res =>{
    ElMessage({
      message: res.message,
      type: 'success',
      duration: 2000
    })

    setTimeout(function (){
      opType.value = 1
    },500)
  })
}

// 登录
const login = () => {
  axios.post("user/login",formData.value).then(res =>{
    // console.log("login",res);
    localStorage.setItem("token",res.token)
    ElMessage({
      message: res.message,
      type: 'success',
      duration: 2000
    })
    localStorage.setItem("navbarIndex","0")
    setTimeout(function (){
      router.replace("/index/home/75395123")
    },700);
  })
}
</script>

<style lang="scss" scoped>
.login-body {
  height: calc(100vh);
  background-image: url("../assets/login_bg.jpg");
  background-size: cover;
  display: flex;

  //.bg {
  //  flex: 1;
  //  background-image: url("../assets/login_img.png");
  //  background-size: cover;
  //  background-size: 800px;
  //  background-repeat: no-repeat;
  //  background-position: center;
  //}

  .login-panel {

    width: 430px;
    //margin-right: 15%;
    //margin-top: calc((100vh - 500px) / 2);
    margin: auto auto;
    //text-align: center;
    .login-register {
      padding: 25px;
      background-color: white;
      border-radius: 5px;

      .login-title {
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
      }

      .send-email-panel {
        display: flex;
        width: 100%;
        justify-content: space-between;

        .send-email-btn {
          margin-left: 5px;
        }
      }

      .rememberme-panel {
        width: 100%;
      }

      .no-account {
        display: flex;
        width: 100%;
        justify-content: space-between;
      }

      .op-btn {
        width: 100%;
      }
    }
  }

  .check-code-panel {
    width: 100%;
    display: flex;

    .check-code {
      margin-left: 5px;
      cursor: pointer;
    }
  }

  .login-btn-qq {
    margin-top: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 40px;

    img {
      cursor: pointer;
      margin-left: 10px;
      width: 20px;
    }
  }
}
</style>